<template>
  <div>
    <el-header style="line-height:60px">
      <h2>单项选择题列表信息</h2>
    </el-header>
    <div id="maintable">
          <el-row>
            <el-col :span="8">
                <p class="title"><i class="el-icon-tickets"></i>最新100+条信息</p>
            </el-col>
            <el-col :span="13">
                <el-input
                       @blur.prevent="searchByPrimary()"
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
                        
            </el-col>
          </el-row>
          <el-table
            border
            :data="tableData"
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              prop="singlechoice_id"
              label="序号"
              sortable
              width="90"
            >
            </el-table-column>
            <el-table-column
              prop="lesson_id"
              label="课程名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="chapter_id"
              label="章节信息"
            >
            </el-table-column>
            <el-table-column
              prop="title"
              label="题目名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop=""
              label="题目来源"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="uptime"
              label="上传时间"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="可用状态"
              width="100"
            >
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="primary" 
                  size="mini"
                  icon="el-icon-edit" 
                  circle
                  @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete" 
                  circle
                  slot="reference"
                  @click="handleDelete(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    <el-dialog title="选择题详情" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" 
                                  label-width="120px" 
                                  @submit.native.prevent
                                  action="#">
        <el-form-item label="章节ID:">
          <el-input v-model="form.chapter_id"></el-input>
        </el-form-item>
        <el-form-item label="课程ID：">
          <el-input v-model="form.lesson_id"></el-input>
        </el-form-item>
        <el-form-item label="选择题目：">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="选择题图片：">
          <el-input v-model="form.image"></el-input>
        </el-form-item>
        <el-form-item label="建议分值：">
          <el-input v-model="form.score"></el-input>
        </el-form-item>
        <el-form-item label="题目难度等级：">
          <el-select v-model="form.difficulty" placeholder="请选择选择题难度">
            <el-option label="简单" value="简单"></el-option>
            <el-option label="一般" value="一般"></el-option>
            <el-option label="较难" value="较难"></el-option>
            <el-option label="困难" value="困难"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项答案：">
          <el-input v-model="form.answer"></el-input>
        </el-form-item>
        <el-form-item label="选项A：">
          <el-input v-model="form.option_a"></el-input>
        </el-form-item>
        <el-form-item label="选项B：">
          <el-input v-model="form.option_b"></el-input>
        </el-form-item>
        <el-form-item label="选项C：">
          <el-input v-model="form.option_c"></el-input>
        </el-form-item>
        <el-form-item label="选项D：">
          <el-input v-model="form.option_d"></el-input>
        </el-form-item>
        <el-form-item label="选项E：">
          <el-input v-model="form.option_e"></el-input>
        </el-form-item>
        <el-form-item label="题目分析：">
          <el-input v-model="form.analysis"></el-input>
        </el-form-item>
        <el-form-item label="题目分析的图片路径：">
          <el-input v-model="form.analysis_image"></el-input>
        </el-form-item>
        <el-form-item label="题目来源：">
          <el-input v-model="form.source"></el-input>
        </el-form-item>
        <el-form-item label="是否可用：">
          <el-input v-model="form.is_del"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'addArticle',
  data () {
    return {
      search: '',
      tableData: [],
      dialogFormVisible: false,
      form: [],
      formLabelWidth: '120px',
      loading:true,
      visible:false
    }
  },
  methods: {
    handleEdit (index, row) {
      this.form = row;
      console.log(this.form)
       this.dialogFormVisible = true
    },
    handleDelete (index, row) {
      this.$confirm('确认删除该条记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row.singlechoice_id)
          return this.$http.put('/api/singlechoiceadd',{"singlechoice_id":row.singlechoice_id},
                      {headers:{
                        'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
                      }}).then((data)=>{
                        console.log(data)
                        if(data.data.code=='305'){
                            this.$message({
                            type: 'success',
                            message: '删除成功！'
                          });
                        }else{
                          this.$message({
                            type: 'error',
                            message: "删除失败！"
                          });
                        }
                        
                      })
          }).catch(()=>{
            this.$message({
            type: 'error',
            message: '删除失败！'
          });
          })
    },
    searchByPrimary(){
      console.log(this.search)
    }
  },
  created(){
    console.log(this.$store.state.token)
    this.$http.get('/api/singlechoicelistall')
        .then(response=> {
          this.tableData = response.data.data
          this.loading = false
        })
        .catch(function (error) {
          console.log(error);
        });
  }
}
</script>

<style lang="scss">
  %shadow{
    background: #fff;
    -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
  }
  #maintable{
    @extend %shadow;
  }
</style>
